<template>
	<div>
		<div class="main answer" @dblclick="onEnter">
			<div class="answer-body">
				<div class="mybox box1">
					<div class="box1-head">
						<span>当前 {{ items.now_num }}题 / 答对{{ items.right_num }}题</span>
						<span>共{{ items.all_num }}题</span>
					</div>
					<div class="box1-body">
						<p>
							{{ item.content }}
						</p>

						<!--<p v-if="item.img">-->
							<img v-if="item.img" :src="item.img">
						<!--</p>-->
					</div>
					<div class="box1-footer">答题所获奖励 {{items.k_num}} K钻</div>
				</div>
				<div class="mybox box2">
					<div class="box2-body">
						<a v-for="(unit, index) in item.answer_list" @click="choose(index +1)" class="btn" :class="{disable:!enableClick}">
							<i :class="answerDetail[chooseOption(index)]" ></i> 
							{{chooseOption(index) + ' '+ unit}}
						</a>
					</div>
					<div class="box2-footer">
						<div class="box2-footer-hd">
							<span>作弊秘籍</span>
						</div>
						<a class="go-post-msg" href="http://wechat.3k.com/bbs/oneIndex/1">去星辰社区发帖求助</a>
					</div>
				</div>

				<div class="mybox box3">
					<div class="box3-body">
						答对10题可参与抽奖赢法宝大礼包 每答一题有机会获得随机K钻惊喜
					</div>
					<div class="box3-footer">
						<a class="btn btn-check-log" @click="changeBox('record')">查看获奖记录</a>
						<p>活动最终解释权归3K游戏所有</p>
					</div>

				</div>
			</div>
		</div>
		<transition name="fade">
			<div class="superbox" :class="{'show':showBox}">
				<prompt father-component="sub" v-if='this.$store.state.box.prompt'></prompt>
				<keep-alive>
					<loading father-component="sub" v-if='this.$store.state.box.loading'></loading>
				</keep-alive>
				<record @changeBox="closeBox" v-if='this.$store.state.box.record'></record>
				<score v-if='this.$store.state.box.score' @changeBox="changeBox"></score>
				<a href="javascript:;" class="logo" v-if='this.$store.state.box.loading'></a>
			</div>
		</transition>
	</div>
</template>

<script>
	import loading from '../components/loading.vue'
	import prompt from '../components/prompt.vue'
	import record from '../components/record.vue'
	import score from '../components/score.vue'

	let sleep = function(time) {
		return new Promise(function(resolve, reject) {
			setTimeout(function() {
				// 模拟出错了，返回 ‘error’
				resolve();
			}, time);
		})
	};

	let answerList;

	export default {
		name: 'sub',
		data() {
			return {
				showBox: false,
				goScore: false,
				answerDetail: {
					A: 'M',
					B: 'M',
					C: 'M',
					D: 'M'
				},
				enableClick: true,
				item: { //题目列表，当前题数小于总题数时展示
					/*'q_id': '45', //题目id
					'content': '新版本中新增的法宝是哪个新版本中新增的法宝是哪个？', //问题内容
					'img': '', //问题图片
					'answer_a': '123123', //答案a-d
					'answer_b': '12123',
					'answer_c': '123123',
					'answer_d': '123123123',*/
				},
				items: {
					'now_num': 0, //当前题数
					'right_num': 0, //正确题数
					'all_num': 0, //总题数
					'q_list': [{}],
					'k_num': 0, //答题所获得K钻总数，当前题数等于总题数时展示
				}
			}
		},
		components: {
			loading,
			prompt,
			record,
			score
		},
		methods: {
			onEnter(){
				this.changeBox('score')
			},
			chooseOption(option) {
				switch(option) {
					case 0:
						return 'A';
					case 1:
						return 'B';
					case 2:
						return 'C';
					case 3:
						return 'D';
				}
			},
			changeBox(name) {
				document.querySelector("body").className = 'noScroll'
				this.showBox = true;
				this.$store.dispatch("changeBox", name);
			},
			closeBox() {
				if(!this.goScore) {
					this.showBox = false;
					this.$store.dispatch("initBox");
					document.querySelector("body").className = ''
				} else {
					this.showBox = true;
					this.$store.dispatch("changeBox", "score");
				}
			},
			getQuestion() {
				console.log('update question --------------------');
				let currentQuestion = this.items.q_list.shift();
				console.log(this.items.q_list.map(e => e.q_id));
				this.item = Object.assign(this.item, currentQuestion);
				//				console.log(this.item);
				
				this.item.answer_list = [
					this.item.answer_a,
					this.item.answer_b,
					this.item.answer_c,
					this.item.answer_d
				];
				console.log(this.item);
			},
			async choose(answer) {
				console.log('you choose' + answer);
				console.log(this.item["q_id"]);
				//				this.changeBox("loading");

				let res = await this.$store.dispatch('answerQuestion', {
					'q_id': this.item["q_id"],
					'answer': answer
				});
				if(!res) {
					return false;
				}
				//				await sleep(1000);
				//				this.closeBox();
				console.log(res);

				//是否抽奖
				this.$store.commit('CANLOTTERY',{canLottery:Boolean(res.is_get)})
				//更新正确题数
				let rightNum = (answer == res.right) ? this.items.right_num + 1 : this.items.right_num;
				
				this.items.right_num = rightNum;
				this.items.k_num += Number(res.k_num);
				this.$store.commit('SCORE', { k_num: this.items.k_num, right_num: rightNum });
				
				
				
				
				//答对
				console.log(res.right,answer);
				if(res.right == answer){
					this.answerDetail[this.chooseOption(res.right - 1)] = 'O';
				} else {
					this.answerDetail[this.chooseOption(answer - 1)] = 'X';
					this.answerDetail[this.chooseOption(res.right - 1)] = 'O';
				}
				
				
				

				this.enableClick = false;

				if(!this.items.q_list.length) {
					//答题结束
					await sleep(1000);
					this.goScore = true;
					return this.changeBox("score");
				}
				
				//显示答题情况，停留 3 秒后进入下一题
				await sleep(1000);
				this.enableClick = true;
				Object.keys(this.answerDetail).forEach(e => {
					this.answerDetail[e] = 'M';
				});
				
				
				
				this.items.now_num++;
				//更新题目
				this.getQuestion();
			}
		},
		async created() {
			await this.$store.dispatch('activityTime');
//			alert('SCORE')
			//活动未开始 或者 已经结束
			if(this.$store.state.activityType == 0) {
				this.changeBox("prompt");
				let res = await this.$store.dispatch('getQuestion');
				res.k_num = Number(res.k_num);
				
				this.$store.commit('SCORE', { k_num: Number(res.k_num), all_num: res.all_num, right_num: res.right_num });
				
				this.$store.commit('CANLOTTERY',{canLottery:Boolean(res.is_get)})
				
			} else {
				//获取题目
				this.changeBox("loading");
				let res = await this.$store.dispatch('getQuestion');
				/*if(!res){
					this.changeBox("loading");
				}
				*/
				
				this.$store.commit('CANLOTTERY',{canLottery:Boolean(res.is_get)})
				
				await sleep(3000);
				this.closeBox();

				if(res.q_list.length == 0) {
					//题目已经答完
					//答题结束
					console.log(res);
					this.goScore = true;
					this.$store.commit('SCORE', { k_num: Number(res.k_num), all_num: res.all_num, right_num: res.right_num,end_msg:res.end_msg });
					
					return this.changeBox("score");
				}

				console.log(res.q_list.map(e => e.q_id));
				//				answerList = res;
				res.k_num = Number(res.k_num);
				this.items = Object.assign(this.items, res);
				
				
				this.$store.commit('SCORE', { k_num: Number(res.k_num), all_num: res.all_num, right_num: res.right_num, end_msg:res.end_msg });
				
				this.getQuestion();

				this.$store.commit('CHANGE_LOADING', { type: 1 });
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "../css/_modules.less";
	.pull-left {
		float: left;
	}
	
	.pull-right {
		float: right;
	}
	
	.main {
		/*width: 7.5rem;*/
		.bg();
		.background-size(7.5rem auto);
		background-color: #151b2a;
		background-image: url(../img/bg-2.jpg);
		background-position: center 0;
	}
	
	@dashed: dashed;
	.answer {
		/*width: 7.5rem;
		margin: 0 auto;
		background: url(../img/bg-2.jpg) center top no-repeat;
		background-size: 100% 100%;*/
		padding-top: 4rem;
		.answer-body {
			width: 7.43rem;
			height: 14.49rem;
			margin: 0 auto;
			background: url(../img/sub.png) center top no-repeat;
			background-size: 100% 100%;
		}
		.mybox {
			color: #fff;
			width: 5.6rem;
			margin: 0 auto;
			padding: .5rem 0;
		}
		.box1 {
			position: relative;
			min-height: 5.05rem;
		}
		.box2 {
			min-height: 3.48rem;
		}
		.box3 {
			min-height: 2rem;
		}
		.box1-head {
			height: .58rem;
			border-bottom: 1px #fff @dashed;
			padding: 0.4rem 0.1rem 0;
			margin-bottom: 0.3rem;
			.box();
			.box-align(center);
			.box-pack(justify);
			span {
				display: block;
				font-size: .24rem;
			}
		}
		.box1-body {
			position: absolute;
			top: 50%;
			.transform(translate(0, -50%));
			margin-top: 0.3rem;
			padding: .05rem .3rem;
			.box();
			.box-align(center);
			.box-pack(center);
			.box-orient(vertical);
			p {
				width: 4.5rem;
				font-size: .28rem;
				padding: 0.1rem 0.2rem;
				/*margin: 0 auto;*/
				/*line-height: 200%;*/
			}
			img {
				/*width: 4.5rem;*/
				/*height: 2.2rem;*/
			    max-height: 2.2rem;
				display: block;
				border-radius: 0.2rem;
				margin: 0.08rem auto 0;
			}
		}
		.box1-footer {
			position: absolute;
			width: 100%;
			bottom: 0.4rem;
			margin-top: .38rem;
			font-size: .24rem;
			text-align: center;
			background: url(../img/sub-title-bg.png) center center no-repeat;
			background-size: 100% .16rem;
		}
		.box2-body {
			padding-top: .5rem;
			.g-clr();
			//答题按钮
			.btn {
				position: relative;
				width: 2.4rem;
				padding: 0 0.2rem;
				margin: 0.02rem 0;
				line-height: .87rem;
				font-size: .27rem;
				background: url(../img/btn-sub.png) center center no-repeat;
				background-size: 100% 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
				float: left;
				&.disable {
					pointer-events: none;
				}
				i {
					position: absolute;
					right: 0;
					top: 0.1rem;
					.wh(60, 60);
					.bg();
				}
				.O {
					background-image: url(../img/O.png);
				}
				.X {
					background-image: url(../img/X.png);
				}
				.M {
					display: none;
				}
			}
		}
		.box2-footer {
			margin-top: .3rem;
			.box2-footer-hd {
				line-height: 0.36rem;
				text-align: center;
				.bg();
				background-image: url(../img/sub-title.png);
				span {
					display: block;
					background-color: #477dc8;
					width: 1.42rem;
					font-size: .24rem;
					border-radius: .2rem;
					margin: 0 auto;
				}
			}
			.go-post-msg {
				width: 2.4rem;
				margin: .1rem auto 0;
				padding-left: .4rem;
				background: url(../img/sub-icon.png) left .06rem no-repeat;
				background-size: .27rem .26rem;
				font-size: .2rem;
				text-decoration: underline;
			    color: #fff;
			    background-position: 0.2rem 0.06rem;
			    padding-left: .6rem;
				display: block;
			}
		}
		.box3-body {
			text-align: center;
			font-size: .24rem;
			margin-top: .6rem;
			padding: .05rem .3rem .2rem;
			border-bottom: 1px #fff @dashed;
		}
		.box3-footer {
			margin-top: .2rem;
			.btn-check-log {
				width: 2.96rem;
				height: 0.73rem;
				line-height: .63rem;
				margin: 0 auto;
				color: #ac6410;
				font-size: .3rem;
				text-align: center;
				background: url(../img/btn-b4.png) center center no-repeat;
				.background-size(contain);
				margin-bottom: .12rem;
				display: block;
			}
			p {
				text-align: center;
			}
		}
	}
</style>